<template>
    <div class="default-main">
        <!-- 顶部数据 -->
        <div class="small-panel-box">
            <el-row :gutter="20">
                <el-col :sm="12" :lg="3">
                    <div class="small-panel users suspension">
                        <div class="small-panel-title">{{ t('dashboard.Total number of members') }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#74A8B5" size="20" name="fa fa-users" />
                                <el-statistic :value="usersNumberOutput" :value-style="statisticValueStyle" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="3">
                    <div class="small-panel user-reg suspension">
                        <div class="small-panel-title">{{ t('dashboard.Member registration') }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#8595F4" size="20" name="fa fa-line-chart" />
                                <el-statistic :value="userRegNumberOutput" :value-style="statisticValueStyle" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="3">
                    <div class="small-panel vip-users suspension">
                        <div class="small-panel-title">{{ t('dashboard.VIP members') }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#F4B885" size="20" name="fa fa-diamond" />
                                <el-statistic :value="vipUsersNumberOutput" :value-style="statisticValueStyle" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="3">
                    <div class="small-panel products suspension">
                        <div class="small-panel-title">{{ t('dashboard.Goods number') }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#85F495" size="20" name="fa fa-shopping-bag" />
                                <el-statistic :value="goodsNumberOutput" :value-style="statisticValueStyle" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="3">
                    <div class="small-panel services suspension">
                        <div class="small-panel-title">{{ t('dashboard.Services number') }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#F485E0" size="20" name="fa fa-envira" />
                                <el-statistic :value="servicesNumberOutput" :value-style="statisticValueStyle" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="3">
                    <div class="small-panel file suspension">
                        <div class="small-panel-title">{{ t('dashboard.Number of store') }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#AD85F4" size="20" name="fa fa-building" />
                                <el-statistic :value="storeNumberOutput" :value-style="statisticValueStyle" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="3">
                    <div class="small-panel addons suspension">
                        <div class="small-panel-title">{{ t('dashboard.Number of Services') }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#F48595" size="20" name="fa fa-user-circle" />
                                <el-statistic :value="serverNumberOutput" :value-style="statisticValueStyle" />
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="3">
                    <div class="small-panel admins suspension">
                        <div class="small-panel-title">{{ t('dashboard.Total administrators') }}</div>
                        <div class="small-panel-content">
                            <div class="content-left">
                                <Icon color="#85C9F4" size="20" name="fa fa-user-md" />
                                <el-statistic :value="adminsNumberOutput" :value-style="statisticValueStyle" />
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 三个统计 -->
        <div class="growth-chart">
            <el-row :gutter="20">
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="8">
                    <el-card shadow="hover" :header="t('dashboard.Goods order')">
                        <template #header>
                            <span style="font-weight: 700; font-size: 16px">{{ t('dashboard.Goods order') }}</span>
                        </template>
                        <div class="card-body">
                            <div class="card-body-top">
                                <div class="title">{{ t('dashboard.Accumulated') }}</div>
                                <div class="value">
                                    ￥<el-statistic :value="goodsTotalMoneyOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                                <div class="number">
                                    （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="goodsTotalOrderOutput" value-style="font-size: 15px;color: #92969a;" />）
                                </div>
                            </div>
                            <div class="card-body-bottom">
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.Today') }}￥<el-statistic
                                            :value="goodsTodayMoneyOutput"
                                            value-style="font-size: 14px;color: #92969a;"
                                        />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                        }}<el-statistic :value="goodsTodayOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.Yesterday') }}￥<el-statistic
                                            :value="goodsYesterdayMoneyOutput"
                                            value-style="font-size: 14px;color: #92969a;"
                                        />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                        }}<el-statistic :value="goodsYesterdayOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.This month') }}￥<el-statistic
                                            :value="goodsMonthMoneyOutput"
                                            value-style="font-size: 14px;color: #92969a;"
                                        />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                        }}<el-statistic :value="goodsMonthOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="8">
                    <el-card shadow="hover">
                        <template #header>
                            <span style="font-weight: 700; font-size: 16px">{{ t('dashboard.Server order') }}</span>
                        </template>
                        <div class="card-body">
                            <div class="card-body-top">
                                <div class="title">{{ t('dashboard.Accumulated') }}</div>
                                <div class="value">
                                    ￥<el-statistic :value="serviceTotalMoneyOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                                <div class="number">
                                    （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="serviceTotalOrderOutput" value-style="font-size: 15px;color: #92969a;" />）
                                </div>
                            </div>
                            <div class="card-body-bottom">
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.Today') }}￥<el-statistic :value="serviceTodayMoneyOutput" value-style="font-size: 14px;color: #92969a;" />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="serviceTodayOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.Yesterday') }}￥<el-statistic :value="serviceYesterdayMoneyOutput" value-style="font-size: 14px;color: #92969a;" />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="serviceYesterdayOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.This month') }}￥<el-statistic :value="serviceMonthMoneyOutput" value-style="font-size: 14px;color: #92969a;" />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="serviceMonthOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="8">
                    <el-card shadow="hover">
                        <template #header>
                            <span style="font-weight: 700; font-size: 16px">{{ t('dashboard.VIP order') }}</span>
                        </template>
                        <div class="card-body">
                            <div class="card-body-top">
                                <div class="title">{{ t('dashboard.Accumulated') }}</div>
                                <div class="value">
                                    ￥<el-statistic :value="vipTotalMoneyOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                                <div class="number">
                                    （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="vipTotalOrderOutput" value-style="font-size: 15px;color: #92969a;" />）
                                </div>
                            </div>
                            <div class="card-body-bottom">
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.Today') }}￥<el-statistic :value="vipTodayMoneyOutput" value-style="font-size: 14px;color: #92969a;" />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="vipTodayOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.Yesterday') }}￥<el-statistic :value="vipYesterdayMoneyOutput" value-style="font-size: 14px;color: #92969a;" />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="vipYesterdayOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="item-value">
                                        {{ t('dashboard.This month') }}￥<el-statistic :value="vipMonthMoneyOutput" value-style="font-size: 14px;color: #92969a;" />
                                    </div>
                                    <div class="item-number">
                                        （{{ t('dashboard.Order:')
                                    }}<el-statistic :value="vipMonthOrderOutput" value-style="font-size: 14px;color: #92969a;" />）
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!-- 待办事项 -->
        <div class="growth-chart">
            <el-row :gutter="20">
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="24">
                    <el-card shadow="hover" :header="t('dashboard.Membership growth')">
                        <template #header>
                            <span style="font-weight: 700; font-size: 16px">{{ t('dashboard.backlog') }}</span>
                        </template>
                        <div class="backlog">
                            <div class="backlog-item" @click="handleBacklogItemClick('/admin/#')">
                                <div class="backlog-title">{{ t('dashboard.Pending delivery orders') }}</div>
                                <div class="backlog-value">
                                    <el-statistic :value="waitingOrderOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                            </div>
                            <div class="backlog-item" @click="handleBacklogItemClick('/admin/#')">
                                <div class="backlog-title">{{ t('dashboard.Pending service orders') }}</div>
                                <div class="backlog-value">
                                    <el-statistic :value="waitingServiceOrderOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                            </div>
                            <div class="backlog-item" @click="handleBacklogItemClick('/admin/#')">
                                <div class="backlog-title">{{ t('dashboard.Distributor application') }}</div>
                                <div class="backlog-value">
                                    <el-statistic :value="distributorApplyOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                            </div>
                            <div class="backlog-item" @click="handleBacklogItemClick('/admin/#')">
                                <div class="backlog-title">{{ t('dashboard.Distributor withdrawal') }}</div>
                                <div class="backlog-value">
                                    <el-statistic :value="distributorWithdrawOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                            </div>
                            <div class="backlog-item" @click="handleBacklogItemClick('/admin/#')">
                                <div class="backlog-title">{{ t('dashboard.Store entry application') }}</div>
                                <div class="backlog-value">
                                    <el-statistic :value="storeApplyOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                            </div>
                            <div class="backlog-item" @click="handleBacklogItemClick('/admin/#')">
                                <div class="backlog-title">{{ t('dashboard.Store withdrawal') }}</div>
                                <div class="backlog-value">
                                    <el-statistic :value="storeWithdrawOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                            </div>
                            <div class="backlog-item" @click="handleBacklogItemClick('/admin/#')">
                                <div class="backlog-title">{{ t('dashboard.Member withdrawal') }}</div>
                                <div class="backlog-value">
                                    <el-statistic :value="vipWithdrawOutput" value-style="font-size: 24px;font-weight: 700;" />
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="growth-chart">
            <el-row :gutter="20">
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="12">
                    <el-card shadow="hover" :header="t('dashboard.orderTrend')">
                        <div class="user-growth-chart" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="12">
                    <el-card shadow="hover" :header="t('dashboard.Sales')">
                        <div class="file-growth-chart" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useEventListener, useTemplateRefsList, useTransition } from '@vueuse/core'
import * as echarts from 'echarts'
import { CSSProperties, nextTick, onActivated, onBeforeMount, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { index } from '/@/api/backend/dashboard'
// import coffeeSvg from '/@/assets/dashboard/coffee.svg'
// import headerSvg from '/@/assets/dashboard/header-1.svg'
// import { useAdminInfo } from '/@/stores/adminInfo'
// import { WORKING_TIME } from '/@/stores/constant/cacheKey'
import { useNavTabs } from '/@/stores/navTabs'
// import { fullUrl, getGreet } from '/@/utils/common'
// import { Local } from '/@/utils/storage'
import { useRouter } from 'vue-router'
const router = useRouter()
// let workTimer: number

defineOptions({
    name: 'dashboard',
})

// const d = new Date()
const { t } = useI18n()
const navTabs = useNavTabs()
// const adminInfo = useAdminInfo()
const chartRefs = useTemplateRefsList<HTMLDivElement>()

const state: {
    charts: any[]
    remark: string
    workingTimeFormat: string
    pauseWork: boolean
} = reactive({
    charts: [],
    remark: 'dashboard.Loading',
    workingTimeFormat: '',
    pauseWork: false,
})

/**
 * 带有数字向上变化特效的数据
 */
const countUp = reactive({
    userRegNumber: 0, //用户注册数量
    storeNumber: 0, //店铺数量
    usersNumber: 0, //用户数量
    serverNumber: 0, //服务器数量
    vipUsersNumber: 0, //会员用户数量
    goodsNumber: 0, //商品数量
    servicesNumber: 0, //服务数量
    adminsNumber: 0, //管理员数量

    goodsTotalMoney: 0, //商品总订单金额
    goodsTotalOrder: 0, //商品总订单数量
    goodsTodayMoney: 0, //商品今日订单金额
    goodsTodayOrder: 0, //商品今日订单数量
    goodsYesterdayMoney: 0, //商品昨日订单金额
    goodsYesterdayOrder: 0, //商品昨日订单数量
    goodsMonthMoney: 0, //商品本月订单金额
    goodsMonthOrder: 0, //商品本月订单数量

    serviceTotalMoney: 0, //服务总订单金额
    serviceTotalOrder: 0, //服务总订单数量
    serviceTodayMoney: 0, //服务今日订单金额
    serviceTodayOrder: 0, //服务今日订单数量
    serviceYesterdayMoney: 0, //服务昨日订单金额
    serviceYesterdayOrder: 0, //服务昨日订单数量
    serviceMonthMoney: 0, //服务本月订单金额
    serviceMonthOrder: 0, //服务本月订单数量

    vipTotalMoney: 0, //会员卡总订单金额
    vipTotalOrder: 0, //会员卡总订单数量
    vipTodayMoney: 0, //会员卡今日订单金额
    vipTodayOrder: 0, //会员卡今日订单数量
    vipYesterdayMoney: 0, //会员卡昨日订单金额
    vipYesterdayOrder: 0, //会员卡昨日订单数量
    vipMonthMoney: 0, //会员卡本月订单金额
    vipMonthOrder: 0, //会员卡本月订单数量

    waitingOrder: 0, //待发货订单数量
    waitingServiceOrder: 0, //待服务订单数量
    distributorApply: 0, //分销员申请数量
    distributorWithdraw: 0, //分销员提现数量
    storeApply: 0, //店铺入驻申请数量
    storeWithdraw: 0, //店铺提现数量
    vipWithdraw: 0, //会员提现数量
})

const countUpRefs = toRefs(countUp)
const userRegNumberOutput = useTransition(countUpRefs.userRegNumber, { duration: 1500 })
const storeNumberOutput = useTransition(countUpRefs.storeNumber, { duration: 1500 })
const usersNumberOutput = useTransition(countUpRefs.usersNumber, { duration: 1500 })
const serverNumberOutput = useTransition(countUpRefs.serverNumber, { duration: 1500 })
const vipUsersNumberOutput = useTransition(countUpRefs.vipUsersNumber, { duration: 1500 })
const goodsNumberOutput = useTransition(countUpRefs.goodsNumber, { duration: 1500 })
const servicesNumberOutput = useTransition(countUpRefs.servicesNumber, { duration: 1500 })
const adminsNumberOutput = useTransition(countUpRefs.adminsNumber, { duration: 1500 })

const goodsTotalMoneyOutput = useTransition(countUpRefs.goodsTotalMoney, { duration: 1500 })
const goodsTotalOrderOutput = useTransition(countUpRefs.goodsTotalOrder, { duration: 1500 })
const goodsTodayMoneyOutput = useTransition(countUpRefs.goodsTodayMoney, { duration: 1500 })
const goodsTodayOrderOutput = useTransition(countUpRefs.goodsTodayOrder, { duration: 1500 })
const goodsYesterdayMoneyOutput = useTransition(countUpRefs.goodsYesterdayMoney, { duration: 1500 })
const goodsYesterdayOrderOutput = useTransition(countUpRefs.goodsYesterdayOrder, { duration: 1500 })
const goodsMonthMoneyOutput = useTransition(countUpRefs.goodsMonthMoney, { duration: 1500 })
const goodsMonthOrderOutput = useTransition(countUpRefs.goodsMonthOrder, { duration: 1500 })

const serviceTotalMoneyOutput = useTransition(countUpRefs.serviceTotalMoney, { duration: 1500 })
const serviceTotalOrderOutput = useTransition(countUpRefs.serviceTotalOrder, { duration: 1500 })
const serviceTodayMoneyOutput = useTransition(countUpRefs.serviceTodayMoney, { duration: 1500 })
const serviceTodayOrderOutput = useTransition(countUpRefs.serviceTodayOrder, { duration: 1500 })
const serviceYesterdayMoneyOutput = useTransition(countUpRefs.serviceYesterdayMoney, { duration: 1500 })
const serviceYesterdayOrderOutput = useTransition(countUpRefs.serviceYesterdayOrder, { duration: 1500 })
const serviceMonthMoneyOutput = useTransition(countUpRefs.serviceMonthMoney, { duration: 1500 })
const serviceMonthOrderOutput = useTransition(countUpRefs.serviceMonthOrder, { duration: 1500 })

const vipTotalMoneyOutput = useTransition(countUpRefs.vipTotalMoney, { duration: 1500 })
const vipTotalOrderOutput = useTransition(countUpRefs.vipTotalOrder, { duration: 1500 })
const vipTodayMoneyOutput = useTransition(countUpRefs.vipTodayMoney, { duration: 1500 })
const vipTodayOrderOutput = useTransition(countUpRefs.vipTodayOrder, { duration: 1500 })
const vipYesterdayMoneyOutput = useTransition(countUpRefs.vipYesterdayMoney, { duration: 1500 })
const vipYesterdayOrderOutput = useTransition(countUpRefs.vipYesterdayOrder, { duration: 1500 })
const vipMonthMoneyOutput = useTransition(countUpRefs.vipMonthMoney, { duration: 1500 })
const vipMonthOrderOutput = useTransition(countUpRefs.vipMonthOrder, { duration: 1500 })

const waitingOrderOutput = useTransition(countUpRefs.waitingOrder, { duration: 1500 })
const waitingServiceOrderOutput = useTransition(countUpRefs.waitingServiceOrder, { duration: 1500 })
const distributorApplyOutput = useTransition(countUpRefs.distributorApply, { duration: 1500 })
const distributorWithdrawOutput = useTransition(countUpRefs.distributorWithdraw, { duration: 1500 })
const storeApplyOutput = useTransition(countUpRefs.storeApply, { duration: 1500 })
const storeWithdrawOutput = useTransition(countUpRefs.storeWithdraw, { duration: 1500 })
const vipWithdrawOutput = useTransition(countUpRefs.vipWithdraw, { duration: 1500 })

const statisticValueStyle: CSSProperties = {
    fontSize: '28px',
}

index().then((res) => {
    state.remark = res.data.remark
})

const initCountUp = () => {
    // 虚拟数据
    countUpRefs.userRegNumber.value = 5456
    countUpRefs.storeNumber.value = 1234
    countUpRefs.usersNumber.value = 9486
    countUpRefs.serverNumber.value = 875
    countUpRefs.vipUsersNumber.value = 1258
    countUpRefs.goodsNumber.value = 3654
    countUpRefs.servicesNumber.value = 852
    countUpRefs.adminsNumber.value = 12
    countUpRefs.goodsTotalMoney.value = 78645
    countUpRefs.goodsTotalOrder.value = 475
    countUpRefs.goodsTodayMoney.value = 575
    countUpRefs.goodsTodayOrder.value = 5765
    countUpRefs.goodsYesterdayMoney.value = 98274
    countUpRefs.goodsYesterdayOrder.value = 412
    countUpRefs.goodsMonthMoney.value = 769447
    countUpRefs.goodsMonthOrder.value = 17428
    countUpRefs.serviceTotalMoney.value = 7866
    countUpRefs.serviceTotalOrder.value = 47
    countUpRefs.serviceTodayMoney.value = 57
    countUpRefs.serviceTodayOrder.value = 576
    countUpRefs.serviceYesterdayMoney.value = 9827
    countUpRefs.serviceYesterdayOrder.value = 41
    countUpRefs.serviceMonthMoney.value = 76944
    countUpRefs.serviceMonthOrder.value = 1742
    countUpRefs.vipTotalMoney.value = 786
    countUpRefs.vipTotalOrder.value = 4
    countUpRefs.vipTodayMoney.value = 5
    countUpRefs.vipTodayOrder.value = 57
    countUpRefs.vipYesterdayMoney.value = 982
    countUpRefs.vipYesterdayOrder.value = 4
    countUpRefs.vipMonthMoney.value = 7694
    countUpRefs.vipMonthOrder.value = 174
    countUpRefs.waitingOrder.value = 123
    countUpRefs.waitingServiceOrder.value = 1234
    countUpRefs.distributorApply.value = 152
    countUpRefs.distributorWithdraw.value = 955
    countUpRefs.storeApply.value = 123
    countUpRefs.storeWithdraw.value = 786
    countUpRefs.vipWithdraw.value = 4367
}
const handleBacklogItemClick = (routePath: string) => {
    // 这里使用路由方法进行跳转
    router.push(routePath)
}
const initUserGrowthChart = () => {
    const userGrowthChart = echarts.init(chartRefs.value[0] as HTMLElement)
    const option = {
        grid: {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50,
        },
        tooltip: {
            trigger: 'axis', // 改为axis类型更适合柱状图
        },
        xAxis: {
            boundaryGap: false,
            data: [
                t('dashboard.Monday'),
                t('dashboard.Tuesday'),
                t('dashboard.Wednesday'),
                t('dashboard.Thursday'),
                t('dashboard.Friday'),
                t('dashboard.Saturday'),
                t('dashboard.Sunday'),
            ],
        },
        yAxis: {
            type: 'value',
            min: 0,
            axisTick: {
                show: true,
            },
            axisLine: {
                show: true,
            },
            axisLabel: {
                show: true,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                },
            },
        },
        legend: {
            data: [t('dashboard.Goods order'), t('dashboard.Server order'), t('dashboard.VIP order')],
            textStyle: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: t('dashboard.Goods order'),
                data: [100, 160, 280, 230, 190, 200, 480],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#8595F4',
                },
            },
            {
                name: t('dashboard.Server order'),
                data: [45, 50, 60, 65, 80, 55, 60],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#F48595',
                    opacity: 0.5,
                },
            },
            {
                name: t('dashboard.VIP order'),
                data: [45, 222, 333, 158, 210, 457, 180],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#F4D585',
                    opacity: 0.5,
                },
            },
        ],
    }
    userGrowthChart.setOption(option)
    state.charts.push(userGrowthChart)
}

const initFileGrowthChart = () => {
    const fileGrowthChart = echarts.init(chartRefs.value[1] as HTMLElement)
    const option = {
        grid: {
            top: 20,
            right: 0,
            bottom: 20,
            left: 50,
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: [t('dashboard.Goods order'), t('dashboard.Server order'), t('dashboard.VIP order')],
            textStyle: {
                color: '#73767a',
            },
        },
        xAxis: {
            type: 'category',
            data: [
                t('dashboard.Monday'),
                t('dashboard.Tuesday'),
                t('dashboard.Wednesday'),
                t('dashboard.Thursday'),
                t('dashboard.Friday'),
                t('dashboard.Saturday'),
                t('dashboard.Sunday'),
            ],
            axisLabel: {
                color: '#73767a',
            },
        },
        yAxis: {
            type: 'value',
            show: true,
            axisLabel: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: t('dashboard.Goods order'),
                data: [100, 160, 280, 230, 190, 200, 480],
                type: 'bar',
                itemStyle: {
                    color: '#8595F4',
                },
            },
            {
                name: t('dashboard.Server order'),
                data: [45, 50, 60, 65, 80, 55, 60],
                type: 'bar',
                itemStyle: {
                    color: '#F48595',
                },
            },
            {
                name: t('dashboard.VIP order'),
                data: [45, 222, 333, 158, 210, 457, 180],
                type: 'bar',
                itemStyle: {
                    color: '#F4D585',
                },
            },
        ],
    }
    fileGrowthChart.setOption(option)
    state.charts.push(fileGrowthChart)
}

const echartsResize = () => {
    nextTick(() => {
        for (const key in state.charts) {
            state.charts[key].resize()
        }
    })
}

onActivated(() => {
    echartsResize()
})

onMounted(() => {
    initCountUp()
    initUserGrowthChart()
    initFileGrowthChart()
    useEventListener(window, 'resize', echartsResize)
})

onBeforeMount(() => {
    for (const key in state.charts) {
        state.charts[key].dispose()
    }
})

onUnmounted(() => {})

watch(
    () => navTabs.state.tabFullScreen,
    () => {
        echartsResize()
    }
)
</script>

<style scoped lang="scss">
.welcome {
    background: #e1eaf9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 15px 20px !important;
    box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
    .welcome-img {
        height: 100px;
        margin-right: 10px;
        user-select: none;
    }
    .welcome-title {
        font-size: 1.5rem;
        line-height: 30px;
        color: var(--ba-color-primary-light);
    }
    .welcome-note {
        padding-top: 6px;
        font-size: 15px;
        color: var(--el-text-color-primary);
    }
}
.working {
    height: 130px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    position: relative;
    &:hover {
        .working-coffee {
            -webkit-transform: translateY(-4px) scale(1.02);
            -moz-transform: translateY(-4px) scale(1.02);
            -ms-transform: translateY(-4px) scale(1.02);
            -o-transform: translateY(-4px) scale(1.02);
            transform: translateY(-4px) scale(1.02);
            z-index: 999;
        }
    }
    .working-coffee {
        transition: all 0.3s ease;
        width: 80px;
    }
    .working-text {
        display: block;
        width: 100%;
        font-size: 15px;
        text-align: center;
        color: var(--el-text-color-primary);
    }
    .working-opt {
        position: absolute;
        top: -40px;
        right: 10px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        padding: 10px 20px;
        border-radius: 20px;
        color: var(--ba-bg-color-overlay);
        transition: all 0.3s ease;
        cursor: pointer;
        opacity: 0;
        z-index: 999;
        &:active {
            background-color: rgba($color: #000000, $alpha: 0.6);
        }
    }
    &:hover {
        .working-opt {
            opacity: 1;
            top: 0;
        }
        .working-done {
            opacity: 1;
            top: 50px;
        }
    }
}
.small-panel-box {
    margin-top: 20px;
}
.small-panel {
    background-color: #fff;
    border-radius: var(--el-border-radius-base);
    padding: 25px;
    margin-bottom: 20px;
    .small-panel-title {
        color: #92969a;
        font-size: 15px;
        margin-bottom: 15px;
    }
    .small-panel-content {
        display: flex;
        align-items: flex-end;
        margin-top: 20px;
        color: #2c3f5d;
        .content-left {
            display: flex;
            align-items: center;
            font-size: 24px;
            .icon {
                margin-right: 10px;
            }
        }
        .content-right {
            font-size: 18px;
            margin-left: auto;
        }
        .color-success {
            color: var(--el-color-success);
        }
        .color-warning {
            color: var(--el-color-warning);
        }
        .color-danger {
            color: var(--el-color-danger);
        }
        .color-info {
            color: var(--el-text-color-secondary);
        }
    }
}
.growth-chart {
    margin-bottom: 20px;

}
.user-growth-chart,
.file-growth-chart {
    height: 260px;
}
.user-source-chart,
.user-surname-chart {
    height: 400px;
}

@media screen and (max-width: 425px) {
    .welcome-img {
        display: none;
    }
}
@media screen and (max-width: 1200px) {
    .lg-mb-20 {
        margin-bottom: 20px;
    }
}
.card-body {
    gap: 15px;
    display: flex;
    flex-direction: column;
    .card-body-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
            font-size: 15px;
            color: #92969a;
        }
        .value {
            font-size: 24px;
            font-weight: 700;
            color: var(--el-text-color-primary);
            display: flex;
            align-items: flex-end;
        }
        .number {
            font-size: 15px;
            color: #92969a;
            display: flex;
            align-items: flex-end;
        }
    }
    .card-body-bottom {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        color: #92969a;
        font-size: 14px;
        .item {
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 33%;
            border-right: 1px solid #e4e7ed;
            &:last-child {
                border-right: none;
            }
            .item-value {
                display: flex;
                align-items: flex-end;
            }
            .item-number {
                display: flex;
                align-items: flex-end;
            }
        }
    }
}
.backlog {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

    .backlog-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        min-width: 150px; // 确保在小屏幕上有最小宽度
        cursor: pointer;
        transition: color 0.3s ease;
        padding: 15px;
        border-radius: 8px;
        background-color: #f8f9fa;

        .backlog-title {
            font-size: 14px;
            color: #1890ff;
            transition: color 0.3s ease;
            margin-bottom: 10px;
        }
        .backlog-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--el-text-color-primary);
            display: flex;
            align-items: flex-end;
        }
        &.hovered,
        &:hover {
            .backlog-title {
                color: #7fc5ff; // 悬浮时颜色变浅
            }
            background-color: #e6f7ff; // 悬浮时背景色变化
        }
    }

    // 手机端适配
    @media screen and (max-width: 768px) {
        flex-direction: column;
        gap: 10px;

        .backlog-item {
            min-width: auto;
            flex: none;
            padding: 12px;

            .backlog-value {
                font-size: 20px; // 手机端字体稍小
            }
        }
    }

    // 平板端适配
    @media screen and (min-width: 769px) and (max-width: 1024px) {
        .backlog-item {
            min-width: calc(50% - 10px); // 平板端显示2列

            .backlog-value {
                font-size: 22px;
            }
        }
    }
}
html.dark {
    .welcome {
        background-color: var(--ba-bg-color-overlay);
    }
    .small-panel {
        background-color: var(--ba-bg-color-overlay);
        .small-panel-content {
            color: var(--el-text-color-regular);
        }
    }
}
</style>
